<template>
  <div class="goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="right-container f1">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="goods-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card
              v-for="subItem in item.foods"
              :key="subItem.id"
              num="2"
              :price="subItem.price"
              :desc="subItem.goodsDesc"
              :title="subItem.name"
              :thumb="subItem.imgUrl"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
//引入bs
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading: false, //左侧没有点击
    }
  },
  methods: {
    //点击菜单
    handleClick(index) {
      this.activeKey = index
      //获取nodeList节点
      const goodsNode = document.querySelectorAll('.goods-item')
      //右侧滚动
      this.bs2.scrollToElement(goodsNode[this.activeKey], 600)
      //设置loading为true代表左侧点击
      this.loading = true
    },
    //滚动渲染
    renderScroll() {
      this.$nextTick(() => {
        this.bs = new BScroll('.navs', {
          click: true,
        })

        this.bs2 = new BScroll('.right-container', {
          click: true,
          probeType: 3, //3 派发滚动事件
        })

        //获取所有goods-item
        const goodsNode = document.querySelectorAll('.goods-item')
        //获取所有good-item盒子的高度 装进数组
        goodsNode.forEach(el => {
          this.heightList.push(el.clientHeight)
        })
        //监听bs2滚动
        this.bs2.on('scroll', ({y}) => {
          if (this.loading) return
          let absY = Math.abs(y)
          /**
           * 索引0  y>0 && y<1盒子
           * 索引1  y>1盒子 && y<1+2 盒子
           * 索引2  y>1+2盒子 && y<1+2+3 盒子
           * 大于前面盒子的和<前面盒子的和+自己高度
           */
          this.heightList.reduce((total, cur, index) => {
            if (absY > total && absY < total + cur) {
              //拿到索引
              this.activeKey = index
            }
            return total + cur
          }, 0)
        })

        //bs2 滚动结束将loading设置为false
        this.bs2.on('scrollEnd', () => {
          this.loading = false
        })
      })
    },
  },
  computed: {
    ...mapGetters('shop', ['navList']),
    ...mapState('shop', ['goodsList']),
  },
  //初始化发请求
  async created() {
    await this.$store.dispatch('shop/A_getGoodsList')
    //渲染
    this.renderScroll()
  },
}
</script>

<style lang="scss" scoped>
.goods {
  height: 100%;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
</style>
